<template>
    <el-menu
            :default-active="activeIndex"
            @select="menuHandle"
            class="el-menu">
        <el-menu-item index="/channel">
            Metal Max
        </el-menu-item>
        <el-menu-item v-for="(category,i) in categories" :index="category.url" :key="i">
            <span slot="title">{{category.name}}</span>
        </el-menu-item>
    </el-menu>
</template>

<script>
    export default {
        data(){
            return {
                activeIndex : ''
            }
        },
        methods:{
            menuHandle(index) {
                if (location.pathname === index) {
                    return false;
                }else {
                    location.href = index
                }
            },
        },
        mounted() {
            this.activeIndex = location.pathname
        },
        props:['categories']
    }
</script>

<style scoped lang="scss">
</style>